<template>
  <div class="search-container">
    <div class="search">
      <form action="/">
        <van-search
                shape="round"
                v-model="searchValue"
                show-action
                :placeholder="$t('button_search')"
                @search="onSearch"
                @cancel="onCancel"
        />
      </form>
    </div>
    <div class="title">
     <span>{{$t('circle256')}}</span>
     <i class="iconfont icon-huishouzhan" @click="clearHistoryItems()"></i>
    </div>
    <div class="recent-search" v-if="historySearchSwitch">
       <div v-for="(item,index) in recentSearch" :key="index" class="recent-search-items">
         <div @click="clickHistory(item)">
           <i class="iconfont icon-shijian-copy-copy"></i>
           <span>{{item}}</span>
         </div>
         <i class="iconfont icon-cha" @click="clearByIndex(index)"></i>
       </div>
    </div>
  </div>
</template>

<script>
import {Notify, Search} from 'vant';

export default {
    name: 'Search',
    components: {
        [Search.name]: Search,
        [Notify.Component.name]: Notify.Component
    },
    data() {
        return {
            searchValue: '',
            recentSearch: [],
            historySearchSwitch: false,
            votId: this.$route.query.votId
        };
    },
    mounted() {
        let historyContent = JSON.parse(localStorage.getItem('historyItems'));
        if (historyContent && historyContent.length > 0) {
            this.recentSearch = historyContent;
            this.checkHistorySearch();
        }
    },
    methods: {
        onSearch() {
            if (this.searchValue) {
                this.appendKeywords(this.searchValue);
                this.checkHistorySearch();
                //相关搜索逻辑
                this.$router.push({path: '/circle/search/list', query: {votId: this.votId, keyWord: this.searchValue}});
            } else {
                Notify({
                    message: this.$t('circle257'),
                    color: '#fff',
                    background: '#ffc002'
                });
            }
        },
        onCancel() {
            this.$router.go(-1);
        },
        checkHistorySearch() {
            if (this.recentSearch.length > 0) {
                this.historySearchSwitch = true;
            }
        },
        clearHistoryItems() {
            localStorage.removeItem('historyItems');
            this.recentSearch = [];
            this.historySearchSwitch = false;
        },
        appendKeywords(value) {
            let appendFlag = true;
            if (this.recentSearch && this.recentSearch.length > 0) {
                this.recentSearch.forEach(function(currentValue, index) {
                    if (currentValue === value) {
                        appendFlag = false;
                    }
                });
                // 判断-添加
                if (appendFlag) {
                    // 长度判断
                    if (this.recentSearch.length >= 10) {
                        this.recentSearch.unshift(value);
                        this.recentSearch.pop();
                    } else {
                        this.recentSearch.unshift(value);
                    }
                }
            } else {
                this.recentSearch = [];
                this.recentSearch.push(value);
            }
            localStorage.setItem('historyItems', JSON.stringify(this.recentSearch));
        },
        clearByIndex(index) {
            this.recentSearch.splice(index, 1);
            localStorage.setItem('historyItems', JSON.stringify(this.recentSearch));
            this.checkHistorySearch();
        },
        clickHistory(item) {
            this.searchValue = item;
            this.onSearch();
        }
    }
};
</script>

<style scoped lang="less">
  /deep/.van-cell{
    line-height: 14px;
    font-size: 12px;
    color: #333;
  }
  /deep/.van-search__action{
    font-size: 12px;
    color: #075ebb;
  }
 .search-container{
   padding: 0;
   margin: 0;
   .search{
    padding: 0 6px;
     background-color: #fff;
   }
   .title{
     padding: 8px 16px;
     height: 25px;
     display: flex;
     justify-content: space-between;
     >span{
       font-size: 12px;
       color: #666;
     }
     >i{
       color: #999;
     }
   }
   .recent-search{
     padding: 10px 16px;
     background-color: #fff;
     display: flex;
     flex-direction: column;
     .recent-search-items{
       display: flex;
       justify-content: space-between;
       padding: 8px 0;
       border-bottom: #eee 1px solid;
       &:last-child{
         border: none;
       }
       >div>i{
         font-size: 10px;
         color: #ccc;
       }
       >div>span{
         margin: 0 6px;
         font-size: 12px;
         color: #666;
         line-height: 20px;
       }
       i>{
         color: #999;
         font-size: 12px;
         line-height: 20px;
       }
     }
   }
 }
</style>
